<template>
  <div class="chart-container">
    <el-row>
      <el-col :span="24" class="chart chart_left">
        <div id="userChart" style="height: 40px">
          <p style="text-align: center; margin-top: 20px; font-size: large">目前可用设备编号:
            <el-tag type="success" size="medium">{{this.availableDeviceNo}}</el-tag>
          </p>
        </div>
        <div id="latestData" style="height: 100px">
          <el-row style="margin-bottom: 10px">
            <el-col :span="6" :offset="1" class="grid-content">
              <div>
                <span style="font-size: large">最新未绑定的设备数据:</span>
              </div>
            </el-col>
            <el-col :span="3" :offset="12" class="grid-content">
              <div>
                <el-input v-model="searchOption.deviceNo" icon="search" :on-icon-click="this.getUserChartInit"
                          placeholder="请输入设备号"></el-input>
              </div>
            </el-col>
          </el-row>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <!--<el-table-column-->
            <!--align="center"-->
            <!--prop="loopDateId"-->
            <!--label="编号"-->
            <!--width="70">-->
            <!--</el-table-column>-->
            <el-table-column
              fixed
              align="center"
              prop="deviceNo"
              label="设备号"
              width="78">
            </el-table-column>
            <el-table-column
              fixed
              align="center"
              prop="loopNo"
              label="回路号"
              width="78">
            </el-table-column>
            <el-table-column
              align="center"
              prop="phaseVoltagea"
              label="A相电压"
              width="92">
            </el-table-column>
            <el-table-column
              align="center"
              prop="phaseVoltageb"
              label="B相电压"
              width="92">
            </el-table-column>
            <el-table-column
              align="center"
              prop="phaseVoltagec"
              label="C相电压"
              width="92">
            </el-table-column>
            <el-table-column
              align="center"
              prop="phaseCurrenta"
              label="A相电流"
              width="92">
            </el-table-column>
            <el-table-column
              align="center"
              prop="phaseCurrentb"
              label="B相电流"
              width="92">
            </el-table-column>
            <el-table-column
              align="center"
              prop="phaseCurrentc"
              label="C相电流"
              width="92">
            </el-table-column>

            <el-table-column
              align="center"
              prop="activePowera"
              label="A相有功"
              width="97">
            </el-table-column>
            <el-table-column
              align="center"
              prop="activePowerb"
              label="B相有功"
              width="97">
            </el-table-column>
            <el-table-column
              align="center"
              prop="activePowerc"
              label="C相有功"
              width="97">
            </el-table-column>
            <el-table-column
              align="center"
              prop="activePowerAll"
              label="总功率"
              width="120">
            </el-table-column>

            <el-table-column
              align="center"
              prop="copperBara"
              label="A相铜排温度"
              width="120">
            </el-table-column>
            <el-table-column
              align="center"
              prop="copperBarb"
              label="B相铜排温度"
              width="120">
            </el-table-column>
            <el-table-column
              align="center"
              prop="copperBarc"
              label="C相铜排温度"
              width="120">
            </el-table-column>

            <el-table-column
              align="center"
              prop="temperature"
              label="环境温度"
              width="92">
            </el-table-column>

            <el-table-column
              align="center"
              prop="humidity"
              label="环境湿度"
              width="92">
            </el-table-column>
            <el-table-column
              align="center"
              prop="switchState"
              label="开关状态"
              width="92">
            </el-table-column>

            <el-table-column
              align="center"
              prop="createTime"
              label="日期"
              width="124">
            </el-table-column>
          </el-table>
          <el-row style="margin-top: 20px; text-align: center">
            <el-button type="danger" @click="this.delDirty" icon="el-icon-delete">删除错乱数据</el-button>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        availableDeviceNo: '暂无数据',
        tableData: [],
        searchOption: {
          deviceNo: ''
        }
      }
    },
    methods: {
      tableRowClassName ({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },
      getUserChartInit () {
        this.$http.get('/bkd/init', {params: this.searchOption})
          .then((res) => {
            if (res.data.flag === 1) {
              this.tableData = res.data.content.latestUnknown
              this.availableDeviceNo = res.data.content.availableDeviceNo
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
      delDirty () {
        this.$http.get('/bkd/delDirty')
          .catch((err) => {
            console.log(err)
          })
      }
    },
    mounted () {
      this.$nextTick(function () {
        this.getUserChartInit()
      })
    }
  }
</script>
<style>
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .chart {
    background-color: white;
    border-radius: 4px;
  }

  .chart_left {
    /*border-right: #F2F2F2 1px solid;*/
  }
</style>
